/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-08-31 15:56:05
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */

import {
  Box,
  Button,
  Container,
  Drawer,
  DrawerContent,
  DrawerOverlay,
  Flex,
  useBreakpointValue,
  useDisclosure,
} from '@chakra-ui/react';

// import { useTranslation } from 'react-i18next';
import i18n from '@tourfly/locales';
import { ReactElement, useState } from 'react';
import { FiMenu } from 'react-icons/fi';

// import FavoriteManage from './FavoriteManage';
import Gallery from './Gallery';
import Invitation from './Invitation';
// import Setting from './Setting';

import UserInfo from '@/features/UserInfo';

const HIDDEN_PROFILE_SETTING = import.meta.env.VITE_APP_HIDDEN_PROFILE_SETTING;
export interface InvokeTabInfo {
  title: string;
  panel: ReactElement;
}
export const tabMap = [
  'resultImages',
  // 'favoriteManage',
  'invitation',
  // 'setting',
] as const;

export type ProfileTabName = (typeof tabMap)[number];

export default function ProductSimple() {
  // const dispatch = useAppDispatch();
  const ProfileTabDict: Record<ProfileTabName, InvokeTabInfo> = {
    resultImages: {
      title: i18n.t('profile.resultImages'),
      panel: <Gallery />,
    },
    invitation: {
      title: i18n.t('profile.invitation'),
      panel: <Invitation />,
    },
    // setting: {
    //   title: i18n.t('profile.setting'),
    //   panel: <Setting />,
    // },
  };

  const [currentTab, setCurrentTab] = useState<ProfileTabName>('resultImages');

  const renderTabs = () => {
    return Object.keys(ProfileTabDict).map((key) => {
      return (
        <Button
          key={key}
          isActive={key === currentTab}
          isDisabled={
            'setting' === key && String(HIDDEN_PROFILE_SETTING) === 'true'
          }
          onClick={() => {
            setCurrentTab(key as ProfileTabName);
          }}
          _active={{
            color: 'base.100',
            bg: 'base.900',
            _hover: {
              bg: 'base.900',
            },
          }}
          _disabled={{
            bg: 'base.950',
            color: 'base.500',
            cursor: 'not-allowed',
            _hover: {
              bg: 'base.950',
            },
          }}
          bg="base.950"
          color="base.300"
          _hover={{ bg: 'base.900' }}
          rounded="sm"
          fontWeight="600"
          m="1"
        >
          {ProfileTabDict[key as keyof typeof ProfileTabDict].title}
        </Button>
      );
    });
  };

  const renderPanel = () => {
    return Object.keys(ProfileTabDict).map((key) => {
      return (
        <Flex
          key={`panel_${key}`}
          display={key === currentTab ? 'flex' : 'none'}
          w="full"
        >
          {'setting' === key && String(HIDDEN_PROFILE_SETTING) === 'true'
            ? '模块建设中'
            : ProfileTabDict[key as keyof typeof ProfileTabDict].panel}
        </Flex>
      );
    });
  };

  const show = useBreakpointValue({ base: true, md: false });
  const { isOpen, onClose, onOpen } = useDisclosure();

  return (
    <Container maxW="full">
      <Flex
        direction="column"
        py="4"
        pr="2"
        w="16rem"
        justify="space-between"
        position="fixed"
        h="calc(100vh - 75px)"
        display={{ base: 'none', md: 'flex' }}
      >
        <Flex direction="column">{renderTabs()}</Flex>
        <UserInfo />
      </Flex>
      <Button
        display={{ base: 'flex', md: 'none' }}
        justifyContent="center"
        onClick={onOpen}
        fontSize="3xl"
        p="0"
        position="fixed"
        bottom={6}
        right={8}
        zIndex={10}
        h="12"
        w="12"
      >
        <FiMenu />
      </Button>
      {show && (
        <Drawer isOpen={isOpen} onClose={onClose} placement="left">
          <DrawerOverlay />
          <DrawerContent bg="base.900">
            <Box overflowY="scroll" h="100vh">
              <Flex
                direction="column"
                minH="100%"
                w="100%"
                p="4"
                justify="space-between"
              >
                <Flex direction="column">{renderTabs()}</Flex>
                <UserInfo />
              </Flex>
            </Box>
          </DrawerContent>
        </Drawer>
      )}
      <Flex ml={{ base: '0', md: '16rem' }} justify="center">
        {renderPanel()}
      </Flex>
    </Container>
  );
}
